<template>
  <div id="inquiry">
    <div class="header">
      <ul>
        <li>
          <span class="count">当前有0人等候</span>
          <span class="person">
            切换就诊人
            <i class="el-icon-arrow-down"></i>
          </span>
        </li>
        <li>
          <button class="end">结束就诊</button>
        </li>
      </ul>
    </div>
    <div class="center">
        <div class="left">
          <div class="part1">
            <p class="kong">
              <i class="el-icon-more"></i>
            </p>
            <div class="heng">
              性别
              <el-input v-model="input" placeholder></el-input>
            </div>
            <div class="heng">
              年龄
              <el-input v-model="input1" placeholder></el-input>
            </div>
            <div class="heng">
              电话
              <el-input v-model="input2" placeholder></el-input>
            </div>
            <div class="heng">
              备注
              <el-input v-model="input3" placeholder="无"></el-input>
            </div>
          </div>
          <div class="part1 part2">
            <p class="write kong">
              <span>本次测量值</span>
              <span>
                <i class="el-icon-edit-outline"></i>编辑
              </span>
            </p>
            <div class="heng">
              身高 :
              <el-input v-model="input4" placeholder="--"></el-input>
            </div>
            <div class="heng">
              体重 :
              <el-input v-model="input5" placeholder="--"></el-input>
            </div>
            <div class="heng">
              体温 :
              <el-input v-model="input6" placeholder="--"></el-input>
            </div>
            <div class="heng">
              舒张压
              <el-input v-model="input7" placeholder="--"></el-input>
            </div>
            <div class="heng">
              收缩压
              <el-input v-model="input8" placeholder="--"></el-input>
            </div>
          </div>
          <div class="part3">
            <p>过往家族病史</p>
            <el-input v-model="input9" placeholder="没有更多诊断结果"></el-input>
          </div>
          <el-button type="primary">患者病例</el-button>
        </div>
        <div class="right">
          <div class="one">
            <h2>问诊信息</h2>
            <div class="onepart">
              <ul class="msg">
                <li>
                  <span>就诊时间:</span> 2020/12/8 下午7:27:17
                </li>
                <li>
                  <span>就诊医生:</span> 刘医生
                </li>
                <li>
                  <span>药物过敏:</span>
                </li>
              </ul>
              <p>
                <el-radio v-model="radio" label="1">初诊</el-radio>
                <el-radio v-model="radio" label="2">复诊</el-radio>
              </p>
            </div>
          </div>
          <div class="two">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="病例" name="first">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="主诉">
                    <el-input type="textarea" v-model="form.desczs"></el-input>
                  </el-form-item>
                  <el-form-item label="病史">
                    <el-input type="textarea" v-model="form.descbs"></el-input>
                  </el-form-item>
                  <el-form-item label="体格检查">
                    <el-input type="textarea" v-model="form.desccheck"></el-input>
                  </el-form-item>
                  <el-form-item label="辅助检查及治疗">
                    <el-input type="textarea" v-model="form.descfz"></el-input>
                  </el-form-item>
                  <el-form-item label="诊断">
                    <el-input type="textarea" v-model="form.desczd"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="医嘱" name="second">医嘱</el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div> 
    </div>
</template>

<script>
export default {
  name: "inquiry",
  data() {
    return {
      input: "",
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      input6: "",
      input7: "",
      input8: "",
      input9: "",
      radio: "1",
      activeName: "second",
      form: {
        desczs: "",
        descbs: "",
        desccheck: "",
        descfz: "",
        desczd: ""
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style lang="scss">
#inquiry {
  width: 100%;
  height:auto;
}
.header {
  // width: 100%;
  height: 50px;
  line-height: 50px;
}
.header ul {
  display: flex;
  justify-content: space-between;
}
.count {
  font-weight: bolder;
}
.person {
  color: #7d95bb;
  margin-left: 10px;
}
.end {
  width: 100px;
  height: 30px;
  border: none;
  line-height: 30px;
  background: #1f90fa;
  margin-right: 30%;
  color: white;
}
.center {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.left {
  width: 20%;
  height: 100%;
  margin:0 10px;
  padding:5px;
  .part1 {
    width: 100%;
    height: 240px;
    background: white;
    border-radius: 5px;
    margin-bottom: 50px;
    .write {
      font-weight: bolder;
      display: flex;
      justify-content: space-around;
    }
    .kong {
      text-align: right;
      height: 30px;
      line-height: 30px;
      padding-right: 30px;
      border-bottom: 1px solid grey;
    }
    .heng {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 16px;
      margin: 10px 0px;
      line-height: 0;
      .el-input {
        width: 70%;
      }
    }
  }
  .part2 {
    height: 300px;
    
  }
  .part3 {
    width: 100%;
    height: 80px;
    background: white;
    margin-bottom: 15px;
    > p {
      width: 100%;
      height: 30px;
      line-height: 45px;
      font-weight: bolder;
      margin-bottom: 10px;
    }
  }
}
.right {
  width: 75%; 
  height: auto;
  border-radius: 10px;
  margin:0 10px;
  margin-bottom:5px;
  background-color: white;
  padding: 0 10px;
  .one {
    width: 100%;
    h2 {
      height: 40px;
      line-height: 40px;
      text-align: left;
    }
    .onepart {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #efefef;
      line-height: 70px;
      margin-bottom: 30px;
      .msg {
        text-align: left;
        li span {
          font-weight: bolder;
        }
      }
    }
  }
  .two{
    width: 100%;
    height: auto;
  }
}
</style>
